<h1 class="page-title-actions">
  Streams
  <span class="actions">
    <button type="button" class="btn btn-sm btn-primary" (click)="create()" [appRole]="['ROLE_CREATE']">
      Create stream(s)
    </button>
    <button type="button" class="btn btn-sm btn-secondary" grafanaDashboardStreams>Grafana Dashboard</button>
    <button type="button" class="btn btn-sm btn-secondary" wavefrontDashboardStreams>Wavefront Dashboard</button>
  </span>
</h1>

<clr-datagrid
  (clrDgRefresh)="refresh($event)"
  [clrDgLoading]="loading"
  [(clrDgSelected)]="!grouped ? null : selected"
  *ngIf="isInit"
  #datagrid
>
  <clr-dg-action-bar *ngIf="grouped">
    <button type="button" class="btn btn-sm btn-secondary" (click)="setMode(false)">Cancel</button>
    <button
      type="button"
      class="btn btn-sm btn-secondary"
      [disabled]="selected?.length === 0"
      (click)="deploy(selected)"
      [appRole]="['ROLE_DEPLOY']"
    >
      Deploy stream(s)
    </button>
    <button
      type="button"
      class="btn btn-sm btn-secondary"
      [disabled]="selected?.length === 0"
      (click)="undeploy(selected)"
      [appRole]="['ROLE_CREATE']"
    >
      Undeploy stream(s)
    </button>
    <button
      type="button"
      class="btn btn-sm btn-outline-danger"
      [disabled]="selected?.length === 0"
      (click)="destroy(selected)"
      [appRole]="['ROLE_DESTROY']"
    >
      Destroy stream(s)
    </button>
    <button
      type="button"
      class="btn btn-sm btn-secondary"
      [disabled]="selected?.length === 0"
      (click)="clone(selected)"
      [appRole]="['ROLE_CREATE']"
    >
      Clone stream(s)
    </button>
  </clr-dg-action-bar>
  <clr-dg-action-bar *ngIf="!grouped">
    <button
      type="button"
      class="btn btn-sm btn-secondary"
      (click)="setMode(true)"
      [appRole]="['ROLE_DEPLOY', 'ROLE_CREATE', 'ROLE_DESTROY']"
    >
      Group Actions
    </button>
    <button type="button" class="btn btn-sm btn-secondary" (click)="refresh(state)">Refresh</button>
  </clr-dg-action-bar>
  <clr-dg-column
    [clrDgField]="'name'"
    [clrDgSortOrder]="context.by === 'name' ? (context.reverse ? -1 : 1) : 0"
    (clrDgColumnResize)="updateContext('sizeName', $event)"
    [style.width.px]="context.sizeName | datagridcolumn: datagrid:contextName:30 | async"
    [clrFilterValue]="context.name"
  >
    <ng-container> Name </ng-container>
  </clr-dg-column>
  <clr-dg-column
    (clrDgColumnResize)="updateContext('sizeDescription', $event)"
    [style.width.px]="context.sizeDescription | datagridcolumn: datagrid:contextName:30 | async"
  >
    <ng-container> Description </ng-container>
    <clr-dg-filter style="display: none"></clr-dg-filter>
  </clr-dg-column>
  <clr-dg-column
    [clrDgField]="'dslText'"
    [clrDgSortOrder]="context.by === 'dslText' ? (context.reverse ? -1 : 1) : 0"
    (clrDgColumnResize)="updateContext('sizeDslText', $event)"
    [style.width.px]="context.sizeDslText | datagridcolumn: datagrid:contextName:30 | async"
  >
    <ng-container> Definition </ng-container>
    <clr-dg-filter style="display: none"></clr-dg-filter>
  </clr-dg-column>
  <clr-dg-column
    (clrDgColumnResize)="updateContext('sizeStatus', $event)"
    [style.width.px]="context.sizeStatus | datagridcolumn: datagrid:contextName:20 | async"
  >
    <ng-container>
      Status&nbsp;
      <button class="datagrid-column-title" style="width: 20px; flex: 0" (click)="statusModal.open()">
        <clr-icon shape="info-standard"></clr-icon>
      </button>
    </ng-container>
    <clr-dg-filter style="display: none"></clr-dg-filter>
  </clr-dg-column>
  <clr-dg-row *ngFor="let stream of page?.items; let i = index" [clrDgItem]="stream">
    <clr-dg-cell
      ><a class="text-truncate" routerLink="/streams/list/{{ stream.name }}">{{ stream.name }}</a></clr-dg-cell
    >
    <clr-dg-cell
      ><span class="text-truncate">{{ stream.description }}</span></clr-dg-cell
    >
    <clr-dg-cell>
      <span class="dsl-text dsl-truncate">
        <app-stream-dsl [dsl]="stream.dslText" [expandable]="false"></app-stream-dsl>
      </span>
    </clr-dg-cell>
    <clr-dg-cell
      ><span class="{{ stream.labelStatusClass() }}">{{ stream.status }}</span></clr-dg-cell
    >
    <clr-dg-action-overflow *ngIf="!grouped">
      <button class="action-item" (click)="details(stream)">Details</button>
      <button
        class="action-item"
        (click)="deploy([stream])"
        *ngIf="stream.status === 'UNDEPLOYED'"
        [appRole]="['ROLE_DEPLOY']"
      >
        Deploy
      </button>
      <button
        class="action-item"
        (click)="deploy([stream])"
        *ngIf="stream.status !== 'UNDEPLOYED'"
        [appRole]="['ROLE_MODIFY']"
      >
        Update
      </button>
      <button
        class="action-item"
        (click)="undeploy([stream])"
        *ngIf="stream.status !== 'UNDEPLOYED' && stream.status !== 'INCOMPLETE'"
        [appRole]="['ROLE_CREATE']"
      >
        Undeploy
      </button>
      <button class="action-item" (click)="destroy([stream])" [appRole]="['ROLE_DESTROY']">Destroy</button>
      <button class="action-item" (click)="clone([stream])" [appRole]="['ROLE_CREATE']">Clone</button>
      <button class="action-item" grafanaDashboardStream [stream]="stream">Grafana Dashboard</button>
      <button class="action-item" wavefrontDashboardStream [stream]="stream">Wavefront Dashboard</button>
    </clr-dg-action-overflow>
    <ng-template
      [clrIfExpanded]="expanded[stream.name]"
      (clrIfExpandedChange)="toggleExpand(stream.name, $event)"
      ngProjectAs="clr-dg-row-detail"
    >
      <clr-dg-row-detail>
        <div class="clr-detail-flo">
          <app-runtime-stream-flo-view [stream]="stream" [metrics]="metricsForStream(stream.name)">
          </app-runtime-stream-flo-view>
        </div>
      </clr-dg-row-detail>
    </ng-template>
  </clr-dg-row>
  <clr-dg-placeholder>No results found.</clr-dg-placeholder>
  <clr-dg-footer>
    <clr-dg-pagination
      #pagination
      [clrDgTotalItems]="page?.total"
      [clrDgPageSize]="context.size"
      [clrDgPage]="context.current"
    >
      <clr-dg-page-size [clrPageSizeOptions]="[10, 20, 50, 100]">Streams per page</clr-dg-page-size>
      {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of {{ page?.total }} streams
    </clr-dg-pagination>
  </clr-dg-footer>
</clr-datagrid>

<app-stream-destroy #destroyModal (onDestroyed)="refresh(state)"></app-stream-destroy>
<app-stream-undeploy #undeployModal (onUndeployed)="refresh(state)"></app-stream-undeploy>
<app-stream-clone #cloneModal (onCloned)="refresh(state)"></app-stream-clone>
<app-stream-status #statusModal></app-stream-status>
